<template>
  <div class="left-wrap con-wrap">
    <h2>组件</h2>
    <ul>
      <li
        v-for="item in queryFormData"
        :key="item.type"
        @dblclick="onDblclickComp(item)"
      >
        <img src="" />
        <span>{{ item.label }}</span>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { queryFormItemType } from '../template/type'
import emitter from '@/utils/emitter.ts'

// 右侧属性表单
const queryFormData = reactive<queryFormItemType[]>([
  { icon: '', type: 'slot', label: '标题', slotName: 'title' },
  { icon: '', type: 'input', label: '单行文本' },
  { icon: '', type: 'textarea', label: '文本域' },
  {
    icon: '',
    type: 'editor',
    label: '文本域2',
    height: '150px',
    // tool: ['bold', 'insertLink'],
  },
  { icon: '', type: 'slot', label: '表格', slotName: 'table' },
  { icon: '', type: 'slot', label: '分隔符', slotName: 'separator' },
  { icon: '', type: 'slot', label: '下载', slotName: 'download' },
])

const onDblclickComp = (item: queryFormItemType) => {
  emitter.emit('onDblclickComp', item)
}
</script>

<style scoped lang="scss">
.left-wrap {
  width: 300px;

  ul {
    display: flex;
    flex-wrap: wrap;

    li {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 33%;
      margin-bottom: 20px;
      cursor: pointer;

      img {
        width: 20px;
        height: 20px;
        margin-bottom: 10px;
      }
    }
  }
}
</style>
